<template>
	<view class="interactiveBar">
		<view class="info">
			<view class="left">
				<view class="item" v-if="type==0">
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
					<text></text>
				</view>
				<view class="item" v-if="type==1" @click="clickCommentBtn">
					<view class="input">评价一下...</view>
				</view>
			</view>
			<view class="right">
				<view class="item" @click="clickLike">
					<uni-icons v-if="true" type="heart" size="28" color="#999"></uni-icons>
					<uni-icons v-else type="heart-filled" size="28" color="#dd524d"></uni-icons>
					<text>12</text>
				</view>

				<view class="item" @click="clickCollect">
					<uni-icons v-if="true" type="star" size="28" color="#999"></uni-icons>
					<uni-icons v-else type="star-filled" size="28" color="#f0ad4e"></uni-icons>
					<text>34</text>
				</view>

				<view class="item">
					<uni-icons type="chatbubble" size="28" color="#999"></uni-icons>
					<text></text>
				</view>
				
				<view class="item" v-if="type==1">
					<uni-icons type="redo" size="28" color="#999"></uni-icons>
					<text></text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
defineProps({
	type:{
		type:Number,
		default:0
	}
})

const emit = defineEmits(['comment']) 

//点赞
const clickLike = ()=>{
	console.log("点赞");
}

//收藏
const clickCollect = ()=>{
	console.log("收藏");
}

//点击评论框按钮
const clickCommentBtn = ()=>{
	console.log("交互子组件");
	emit("comment")
}
</script>

<style lang="scss" scoped>
	.interactiveBar {		
		.info {
			height: 130rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 30rpx;

			.item {
				display: flex;
				align-items: center;
				padding: 10rpx 15rpx;
				color: #999;
			}

			.left {				
				flex:1;
				margin-right: 15rpx;
				.item {
					padding-left: 0;
				}
				.input{
					width: 100%;
					height: 70rpx;
					background: #f7f7f7;
					border-radius: 70rpx;
					display: flex;
					align-items: center;
					padding:0 30rpx;
				}
			}

			.right {
				display: flex;

				.item:last-child {
					padding-right: 0;
				}
			}
		}

	}
</style>